<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- iphone下数字显示手机号问题 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- 禁止缓存 -->
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>限时活动</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/limit-activities.css">
    <script type="text/javascript" src="js/rem.js"></script>
</head>
<body>
<div class="limit-wrapper" style="height: 32.5rem;">

    <!-- ----- 顶部背景 ----- -->
    <div class="title">
        <div style="width: 100%;height: 4rem;background: url('images/topImg.png') 100% 100% no-repeat;background-size: 100% 100%;"></div>
        <p style="width: 75%;height: 2px;background: url('images/borderImg.png') 100% 100% no-repeat;background-size: 100% 100%;"></p>
        <div style="min-width: 65%;height: 0.7rem;text-align: center;line-height: 0.7rem;font-size: 0.45rem;letter-spacing: 3px;color: #d80606;">
            每次活动时间内充值最高者获得
        </div>
        <p style="width: 75%;height: 2px;background: url('images/borderImg.png') 100% 100% no-repeat;background-size: 100% 100%;"></p>
    </div>

    <!-- ----- 当前活动礼物 ----- -->
    <div class="prize"></div>

    <!-- ----- 活动时间抽 ----- -->
    <div class="time-line-box">
        <div class="time-line-wrapper">
            <span class="dot left">
                <img src="images/arrows-right.png" alt="" style="width: 100%;height: 100%;transform: rotate(180deg);">
            </span>
            <span class="dot right">
                <img src="images/arrows-right.png" alt="" style="width: 100%;height: 100%;">
            </span>
            <hr>
            <div class="swiper-container">
                <div class="swiper-wrapper"></div>
            </div>
        </div>
    </div>

    <!-- ----- 充值 与 倒计时 界面 以及 刷新按钮 ----- -->
    <div class="charge-wrapper">
        <!-- 充值按钮 -->
        <button class="char-btn-wrapper">
            <img id="chargeBtn" class="chargeBtn" src="images/限时充值_10.png" alt="" style="width: 100%;height: 100%;">
        </button>
        <!-- ----- 倒计时与刷新 ----- -->
        <div class="countDown-box" style="width: 100%;">
            <div class="countDown-wrapper">
                <!-- 倒计时 -->
                <section class="countDown">
                    <span>倒计时</span>
                    <p id="timer-wrapper" style="margin-left: 5px;"></p>
                    <p class="overTime-wrapper" style="margin-left: 5px;display: none;">
                        <!--加时<span id="overTime">1</span>分钟-->
                    </p>
                </section>
                <!-- 刷新 -->
                <button id="refresh" class="refresh">
                    <img src="images/refresh.svg" alt="" style="width: 0.4rem;height: 0.4rem;vertical-align: -2px;">
                    <span style="font-size: 0.4rem;">刷新</span>
                </button>
            </div>
            <!-- ----- 充值信息及排名情况 ----- -->
            <div class="chargeInfo-box">
                <section id="header" class="borderBottom">
                    <p class="chargeNum width-40">充值名次</p>
                    <p class="chargeMoney width-30">充值金额</p>
                    <p class="chargeTime width-30">充值时间</p>
                </section>
                <div class="chargeInfo"></div>
            </div>
        </div>
    </div>

    <!-- ----- 奖品记录 ----- -->
    <div style="overflow: auto;position: relative;padding: 0 10%;">
        <div class="record-title">奖品记录</div>
        <div class="award-box">
            <!-- ---- 奖品记录 ---- -->
            <div class="award-record"></div>
        </div>
    </div>

    <!-- ----- 活动说明 ----- -->
    <div class="activity-wrapper">
        <section class="activity-time">
            <span>活动商品全部包邮</span>
        </section>
        <section class="activity-time">
            <span>活动时间</span>
            :
            <span id="time-quantum"></span>
        </section>
        <section class="activity-rules">
            <span>活动规则</span>
            :
            <span style="font-size: 0.35rem;">活动时间内充第一名获得奖品。并列充值最高，按时间先后排名。如果活动时间结束前1分钟有充值者，则活动向后加时1分钟，最多加时5分钟，下次活动开始时间延后。</span>
        </section>
    </div>

</div>

<!-- ------ 阶段活动 充值详情 模态框 ------ -->
<div id="modal" class="modal">
    <div class="details-box">
        <p class="details-title">详情</p>
        <div class="details-wrapper"></div>
    </div>
    <span id="close" class="close"></span>
</div>

<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/extend_zepto.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/getInfo.js"></script>
<script type="text/javascript" src="js/invokenative.js"></script>
<script type="text/javascript" src="js/translate.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="overwrite_activities.js"></script>
<script type="text/javascript" src="js/overwrite_countdown.js"></script>
</body>
</html>